<template>
    <div class="preview-body" style=" overflow: auto">
        <div ref="container" class="preview-container"></div>
    </div>
</template>
<script setup lang="ts">
import {onBeforeUnmount, onMounted, ref} from 'vue'
import {storeToRefs} from "pinia";
import {usePrintStore} from "@/store/modules/print";

const props = withDefaults(
    defineProps<{
        testJson?: any
    }>(),
    {}
)
const {hiprintTemplate} = storeToRefs(usePrintStore())

onBeforeUnmount(() => {
    // $(".preview-container").empty();
    container.value = null
})

const container = ref(null)

onMounted(() => {
    let html: any = null
    if (props.testJson) {
        html = hiprintTemplate.value.getHtml(props.testJson)
    } else {
        html = hiprintTemplate.value.getHtml()
    }
        setTimeout(() => {
            container.value!.innerHTML = html.html()
        }, 200);
        return;
})


</script>
<style scoped>
.preview-body {
    padding: 14px 0;
    display: flex;
    justify-content: center;
}
</style>
